<template>
  <div class="overall">
    <div class="content">
      <div class="content-left">
        <img
          src="../../assets/OIP-C.jpg"
          alt="翠·夏"
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="content-right">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
      >
        <div class="content-right-header">
          <span>填写资料</span>
        </div>
        <div class="content-right-img">
          <img src="https://www.keaitupian.cn/cjpic/frombd/0/253/3687574956/678941709.jpg" width="100px" alt="">
        </div>
        <div class="content-right-personInfo">
          
          <div class="personInfo-username">
            
            <span>用户名:</span> <br />
            <el-form-item prop="username">
            <el-input
              v-model="ruleForm.username"
              style="width: 340px"
              placeholder="输入账号"
            /></el-form-item>
          </div>
          <div class="personInfo-input">
            <span>密码:</span> <br />
            <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              style="width: 340px"
              type="password"
              placeholder="输入密码"
            />
            </el-form-item>
          </div>
          <div class="personInfo-input">
            <span>学号/工号:</span> <br />
            <el-form-item prop="stId">
            <el-input
              style="width: 340px"
              placeholder="输入学号或工号"
              v-model="ruleForm.stId"
            />
            </el-form-item>
          </div>
          
        </div>
        <div class="choose">
          <div class="choose-left">
            <el-form-item prop="radio">
            <el-radio :value="2" v-model="ruleForm.radio">我是学生</el-radio>
            </el-form-item>
          </div>
          <div class="choose-right">
            <el-form-item prop="radio">
            <el-radio :value="1" v-model="ruleForm.radio">我是老师</el-radio>
            </el-form-item>

          </div>
        </div>

        <div class="footer">
          <div class="footer-left">
            <el-button style="width: 150px" size="large" round @click="backhome"
              >取消</el-button
            >
            <el-button
              style="width: 150px"
              type="primary"
              size="large"
              round
              @click="register(ruleFormRef)"
              >注册</el-button
            >
          </div>
        </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";

import router from "@/router";
import axios from "axios";
// import axios from "axios";

const username = ref("");
const password = ref("");
const stId = ref("");
const radio = ref("");
const imageUrl = ref("");

const backhome = () => {
  router.push({
    path: "/stuIndex",
  });
};

const register = async(formEl: FormInstance | undefined) => {
  fetch(`http://localhost:3000/TbUserinfoController/getinfo?sno=${stId.value}`)
    .then((res) => res.json())
    .then((res) => {
      console.log(res.code);
      let code = res.code;
      if (code == 500) {
        ElMessage({
          message: "学号已注册",
          type: "error",
        });
        stId.value = "";
      } else {
        fetch("http://localhost:3000/TbUserinfoController/saveUserinfo", {
          method: "post",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            img:'https://www.keaitupian.cn/cjpic/frombd/0/253/3687574956/678941709.jpg',
            username: ruleForm.username,
            password: ruleForm.password,
            sno: ruleForm.stId,
            status: radio.value,
          }),
        }).then( async(res) => {
          if (!formEl) return
      await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('addactive!')
        alert('注册成功！')
                window.location.href = '/userlogin'
      } else {
        console.log('error submit!', fields)
      }
    })
        });
      }
    });
};

interface RuleForm {
  username: string;
  password: string;
  stId: string;
  radio: string;
}

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  username: "",
  password: "",
  stId: "",
  radio: "",
});

const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { max: 6, message: "长度不能超过6个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 8, message: "长度最低8个字符", trigger: "blur" },
  ],
  stId: [
    { required: true, message: "请输入学号或工号", trigger: "blur" },
    {
      min: 2,
      max: 10,
      message: "长度最低2个字符，最多10个字符",
      trigger: "blur",
    },
  ],
  radio: [{ required: true, message: "请选择职位", trigger: "blur" }],
});
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.overall {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  margin-top: 30px;
  width: 1000px;
  height: 600px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  display: flex;
}

.login-container {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}
.content-right {
  padding-left: 50px;
  /* align-items: center; */
  /* justify-content: center; */
}

.personInfo-input {
  padding-top: 15px;
}

.choose {
  padding-top: 30px;
  display: flex;
  justify-content: center;
}

.choose-left {
  padding-right: 40px;
}

.footer {
  display: flex;
  justify-content: center;
  padding-top: 60px;
}

.personInfo-username {
  padding-top: 50px;
}
</style>